<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件修饰符</title>
	</head>
	<body>
		<div id="app">
			
			<!-- 事件冒泡:
				如果事件有嵌套关系, 执行完成内部事件之后,执行
				外部事件.这种现象称之为事件冒泡.
				1.阻止事件冒泡:
				语法:
					1.v-on:click.stop="xxx"
					2.@click.stop
			-->
			<div @click="addNum2">
				<h3>{{num}}</h3>
				<button @click.stop="addNum">增1</button>
			</div>
			<hr /><!--分界线-->
			
			<!-- 2.阻止默认行为 
				如果需要阻止标签的默认的行为则添加 @click.prevent
			 -->
			<div>
				<h3>阻止默认行为</h3>
				<a href="http://www.baidu.com" @click.prevent="baidu">百度</a>
			</div>
			
			<hr />
			
			<div>
				<h3>特殊按键字符说明</h3>
				回车键触发:<input  name="username" type="text" @keyup.enter="handler"/>
				<br />
				删除键触发:<input  name="age" type="text" @keyup.delete="handler"/>
				<br />
				space键触发:<input  name="sex" type="text" @keyup.space="handler"/>
				<br />
				Tab键触发:<input  name="sex" type="text" @keydown.tab="handler"/>
			</div>
			
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					num: 1
				},
				//key:value 格式
				methods: {
					addNum(){
						this.num++
					},
					addNum2(){
						this.num=this.num+2
					},
					baidu(){
						console.log("百度点击按钮")
					},
					handler(){
						console.log("函数被执行")
					}
				}
			})
		</script>
	</body>
</html>
